<!--
 * @Author: your name
 * @Date: 2021-05-08 11:09:32
 * @LastEditTime: 2021-06-30 13:59:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\owns\projectDetailAddMemberModal.vue
-->
<template>
  <a-modal :visible="memberModal" title="添加人员" @ok="handleOk" @cancel="handleCancel" :destroy-on-close="true" :width="560">
    <a-form-model ref="addMember" :model="addMemberState" :rules="addMemberRules" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
      <a-form-model-item label="选择人员" prop="name">
        <a-select show-search :filter-option="false" :value="addMemberState.name" placeholder="请选择人员" @search="onSearchUser" @change="onChangeUser">
          <a-select-option v-for="item in memberList" :key="item.realName + ',' + item.id">{{ item.realName }} ----- {{ item.postName }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="负责职务" prop="postCheckedList">
        <a-checkbox-group :value="addMemberState.postCheckedList" @change="onChange">
          <a-checkbox v-for="item in postList" :key="item.value" :value="item.value" :disabled="item.disabled">
            {{ item.label }}
          </a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { getSearchUser } from '@/services/project';
export default {
  name: 'mamberModal',
  props: {
    memberModal: {
      type: Boolean,
      default: false,
    },
    addMemberState: Object,
    havePostList: Array,
    delPostCode: Number,
  },
  data () {
    return {
      postList: [],
      memberList: [],
      addMemberRules: {
        name: [
          {
            required: true,
            message: '请选择人员！',
            trigger: 'change',
          },
        ],
        postCheckedList: [
          {
            required: true,
            message: '请选择职务！',
            trigger: 'change',
          },
        ],
      },
    };
  },
  watch: {
    havePostList: {
      handler (val) {
        const arr = [
          {
            label: '项目负责人',
            value: '1',
          },
          {
            label: '财务出纳',
            value: '2',
          },
          {
            label: '人事代理',
            value: '3',
          },
          {
            label: '薪税专员',
            value: '4',
          },
        ]
        arr.forEach(item => {
          val.forEach(item1 => {
            if (item1 == item.value) {
              item.disabled = true;
            }
          });
        });
        if (this.delPostCode) {
          arr.forEach(item => {
            if (item.value == this.delPostCode) {
              item.disabled = false;
            }
          });
        }
        this.postList = arr;
      },
    },
  },
  methods: {
    onChange (val) {
      this.$emit('changePost', val);
    },
    handleCancel () {
      this.$refs.addMember.resetFields();
      this.addMemberState.name = '';
      this.$emit('cancelModal', {
        str: 'cancel',
        data: '',
      });
    },
    handleOk () {
      this.$refs.addMember.validate(valid => {
        if (valid) {
          this.$emit('cancelModal', {
            str: 'ok',
            data: this.addMemberState,
          });
          this.$emit('changePost');
        } else {
          return false;
        }
      });
    },
    onSearchUser (value) {
      if (value.length >= 2) {
        this.getSearchUser({ realName: value });
      }
    },
    onChangeUser (value) {
      const arr = value.split(',');
      this.$emit('changeUser', arr);
    },
    /**
     * @description: 搜索系统人员
     * @param {*}
     * @return {*}
     */
    getSearchUser (params) {
      getSearchUser(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.memberList = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
};
</script>

<style></style>
